<template>
  <el-card >
       <h1>成绩管理系统</h1>
  <div>
    <p>
      <label>账户：</label>
      <input type="text" v-model="user.username" />
    </p>
    <p>
      <label>密码：</label>
      <input type="password" v-model="user.password" />
    </p>
    <p>
      <button type="button" @click="login()">登录</button>
    </p>
  </div>
  </el-card>


</template>

<script>
  import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    computed: mapState(['name']),
    data() {
      return {
        user: {
          username: '',
          password: ''
        }
      }
    },
    methods: {
      ...mapMutations(['setName', 'setIsLogined', 'setUser']),
      login() {
        this.$ajax.post('login', this.user).then(res => {
          var result = res.data;
          if (result.success) {
            var name = result.data.name;
            var token = result.data.token;
            window.sessionStorage.setItem("name", name);
            window.sessionStorage.setItem("token", token);
            this.setName(name);
            this.setIsLogined(true);
            this.setUser(this.user.username);
            /* console.log(this.user.username); */
            this.$router.replace('/mune');
          }
        })
      }
    }

  }
</script>

<style scoped>
  div {
    width: 31.25rem;
    margin: 3.125rem auto;
    text-align: center;
  }

  input,
  button {
    padding: 0.3125rem 0.9375rem;
  }
</style>
